<template>
  <el-container>
    <el-aside width="200px">
      <!-- 左侧菜单 -->
      <el-menu default-active="1" class="el-menu-vertical-demo">
        <el-menu-item
          v-for="item in kindList"
          :key="item.id"
          :index="item.id.toString()"
          @click="navigateToKind(item.id)"
        >
          {{ item.kindName }}
        </el-menu-item>
      </el-menu>
    </el-aside>
    <el-main>
      <!-- 右侧详情区 -->
      <router-view></router-view>
      <!-- 这里将渲染 kindDetail 组件 -->
    </el-main>
  </el-container>
</template>  
  
<script>
import { getKindList } from "@/api/kind";
export default {
  data() {
    return {
      kindList: [],
    };
  },
  methods: {
    navigateToKind(id) {
      this.$router.push(`/home/kind/kindDetail/${id}`);
    },
    async getKindList() {
      const res = await getKindList();
      if (res.data.success) {
        this.kindList = res.data.result;
      }
    },
  },
  created() {
    this.getKindList().finally(() => {
      this.$router.push(`/home/kind/kindDetail/${this.kindList[0].id}`);
    });
  },
};
</script>  
  
<style>
/* 样式调整，确保布局正确 */
.el-container {
  display: flex;
  height: 100vh; /* 根据需要调整高度 */
}
.el-aside {
  background-color: #f5f7fa; /* 可选：设置背景颜色 */
  padding: 20px; /* 可选：增加内边距 */
}
.el-main {
  flex: 1; /* 使主区域占据剩余空间 */
  padding: 20px; /* 可选：增加内边距 */
}
</style>